<template>
	<view id="invitation-code-list">
		<view class="code-list" v-for="(item,index) in listData" :key="index">
			<view class="cell-left">
				<view class="invitation-code">{{item.push_code}}</view>
				<!-- <view class="time">{{item.create_time}}</view> -->
			</view>
			<div class="cell-right" v-if="item.status == 2">
				<view class="code-type" style="color: red;">未使用</view>
				<view class="copy-btn" @tap="copyInviteNum(item.push_code)">复制</view>
			</div>
			<div class="cell-right" v-else>
				<view class="code-type" style="color:#adadad">已使用</view>
			</div>
		</view>
		<uni-load-more v-if="allNum > 10" :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		apiPushUserCodeList
	} from '../../../http/apis.js'
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue'
	export default {
		computed: {
			...mapState(['token'])
		},
		components:{
			uniLoadMore
		},
		data(){
			return {
				loadingType: 'more',
				codeForm:{
					token: '',
					status: 3,
					page: 1,
					pageSize: 10
				},
				listData: [],
				allNum: 0
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.codeForm.token = this.token
			this.getCodeList()
		},
		onReachBottom(){
			// 上拉加载
			setTimeout(()=>{
				this.loadMoreData()
			},1000)
		},
		methods:{
			getCodeList(){
				this.codeForm.page = 1
				this.loadingType = 'more'
				apiPushUserCodeList(this.codeForm).then(res =>{
				    if(res.data.code == 1)  {
						this.listData = res.data.msg.res
						this.allNum = res.data.msg.con
					}         
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			loadMoreData(){
				this.codeForm.page++;
				if (this.loadingType!= 'more') {
					//loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 'loading';
				apiPushUserCodeList(this.codeForm).then(res =>{
				    if(res.data.code == 1)  {
						let data = res.data.msg.res
						if (data == null || data.length == 0) {
							//没有数据
							this.loadingType = 'nomore';
							return false;
						}
						for (var i in data) {
							this.listData.push(data[i]);
						}
						this.loadingType = 'more';
					}         
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
				
				
			},
			copyInviteNum(code){
				uni.setClipboardData({
					data: this.GLOBAL.MAIN_URL + 'pages/reg/reg' + '?inviteCode='+ code,
					success: ()=> {
						this.$msg.showToast('复制成功')
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	#invitation-code-list {
		page {
			background-color: #FFFFFF;
			}
			.loading-text {
				height: 80upx;
				line-height: 80upx;
				font-size: 30upx;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				color: #adadad;
			}
			.code-list {
				border-bottom: 1px solid #e0e0e0;
				padding: 10px;
				display: flex;
				align-items: center;
			}
			.cell-left {
				display: inline-block;
				width: 60%;
				.invitation-code {
					font-size: 32upx;
					color: #353535;
				}
				.time {
					font-size: 32upx;
					color: #adadad;
				}
				
			}
			.cell-right {
				display: inline-block;
				width: 40%;
				vertical-align: top;
				.code-type {
					display: inline-block;
					padding: 20upx;
					font-size: 32upx;
				}
				.copy-btn {
					display: inline-block;
					padding: 10upx 30upx;
					text-align: right;
					float: right;
					font-size: 28upx;
					color: $theme-color;
					border: 1px solid $theme-color;
					border-radius: 24upx;
					margin-top: 6upx;
				}
			}
		.yaoqingmastyle{
			width: 100%;
			height: 60px;
			border-bottom: 1px solid #8F8F94;
			background-color: #FFFFFF;
		}
		.left{
			float: left;
			width: 50%;
			height: 96%;
			line-height: 55px;
			view{
				margin-left: 20px;
			}
		}
		.zhongjiang{
			position: relative;
			float: left;
			width: 28%;
			text-align: center;
			height: 96%;
			line-height: 55px;
		}
		.right{
			float: left;
			width: 20%;
			height: 96%;
			line-height: 55px;
			view{
				margin-left: 13px;
			}
		}
	}
</style>
